<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    /* 设置页面的整体布局 */
    body {
        display: flow;
        padding: 65px;
        background-color: #949292;
        color: white;
    }
    /* 设置文本框的样式 */
    .text-box {
        margin: auto;
        width: 900px;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 4px;
        margin-bottom: 40px;
    }
    .textarea-box{
        margin: auto;
        width: 900px;
        height: 800px;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 4px;
        margin-bottom: 40px;

    }
    /* 设置textarea的样式 */
    .text-area {
        width: 100%;
        height: 100%;
        margin: 0; /* 清除默认外边距 */
        padding: 0; /* 清除默认内边距 */
        outline: medium;
        border: none;
        resize: none;
        background-color: #949292;
        color: white;
    }
    /* 设置按钮的样式 */
    .my-button {
        margin-left : 1000px;
        margin-bottom: 50px;
        padding: 10px 20px;
        font-size: 16px;
        color: #fff;
        background-color: #007bff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    /* 鼠标悬停在按钮上时的样式 */
    .my-button:hover {
        background-color: #0056b3;
    }
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/ace/1.24.2/ace.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/ace/1.24.2/ext-language_tools.js"></script>
<body>
    <div class="text-box" id="problemDesc">

    </div>
    <div class="textarea-box" id="editor">
            <textarea class = "text-area" id="codeEditor">

            </textarea>
    </div>

    <button class="my-button" id="submitButton">
        提交
    </button>

    <div class="text-box" >
        <pre id="problemResult">

        </pre>
    </div>
</body>
<script>
    function initAce(){
        let editor = ace.edit("editor");
        editor.setOptions({
            enableBasicAutocompletion:true,
            enableSnippets:true,
            enableLiveAutocompletion:true
        });
        editor.setTheme("ace/theme/twilight");
        editor.session.setMode("ace/mode/java");
        editor.resize();
        document.getElementById('editor').style.fontSize = '20px';
        return editor;
    }
    let editor = initAce();
    function getProblem(){
        $.ajax({
            "url":"problem/getOne"+location.search,
            type:"get",
            success:function (data,status){
                makeProblemDetail(data);
            }
        })
    }
    function makeProblemDetail(problem){
        //1
        let problemDesc = document.querySelector("#problemDesc");
        let h1 = document.createElement("h1");
        h1.innerHTML = problem.id + "." + problem.title + "_" + problem.level;
        problemDesc.appendChild(h1);

        let pre = document.createElement("pre")
        let p = document.createElement("p");
        p.innerHTML = problem.description;
        pre.appendChild(p);
        problemDesc.appendChild(pre);

        //2
        // let codeEditor = document.querySelector("#codeEditor");
        // codeEditor.innerHTML = problem.templateCode;
        editor.setValue(problem.templateCode);

        //3
        let submitButton = document.querySelector("#submitButton");
        submitButton.onclick = function (){
            //点击按钮，把编辑框的内容提交到服务器上
            let body = {
                id : problem.id,
                code:editor.getValue()
            }
            $.ajax({
                url:"execute/compile",
                type:"POST",
                contentType: "application/json",
                data:JSON.stringify(body),
                success:function (data,status){
                    let problemResult = document.querySelector("#problemResult")
                    if(data.error == 0){
                        //没有问题，把stdout显示到页面上
                        problemResult.innerHTML = data.stdout;
                    }else {
                        problemResult.innerHTML = data.reason;
                    }

                }
            })
        }
    }

    getProblem();
</script>
</html>